<template>
  <div class="goods-cate">
    <el-card class="box-card">
      <div slot="header" class="clearfix df">
        <span>商品分类</span>
        <el-button class="addCate" @click="addDialog = true"
          >添加分类</el-button
        >
      </div>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="120">
        </el-table-column>
        <el-table-column label="分类名称" width="150">
          <template slot-scope="{ row }">
            <span v-show="!row.ismodify">{{ row.cateName }}</span>
            <el-input v-show="row.ismodify" v-model="row.cateName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否禁用" width="150">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.state"
              inactive-color="#f0dcdd"
              active-color="#d99bac"
              :disabled="!row.ismodify"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              v-show="!row.ismodify"
              @click="editGoods(row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              v-show="row.ismodify"
              @click="editGoodsFind(row)"
              >完成</el-button
            >
            <el-button size="mini" type="danger" @click="delGoods(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="添加分类"
        :visible.sync="addDialog"
        @click="dialogClose"
      >
        <el-form :model="addFormData" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="addFormData.cateName"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="addFormData.state"></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  goodsCatelist,
  goodsEditcate,
  goodsDelcate,
  goodsAddcate,
} from "@/api/goods";
export default {
  data() {
    return {
      tableData: [],
      value1: "false",
      currentPage: 1,
      pageSize: 5,
      total: 0,
      addDialog: false,
      addFormData: {
        cateName: "",
        state: false,
      },
      loading: false,
      formLabelWidth: "80px",
      timer: null,
    };
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      let res = await goodsCatelist({
        currentPage,
        pageSize,
      });
      console.log(res);
      let { total, data } = res.data;
      data.map((v) => {
        //是否禁用
        v.state = v.state ? true : false;
        v.ismodify = false;
      });
      this.total = total;
      this.tableData = data;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    //点击编辑
    editGoods(val) {
      //点击编辑时 显示input
      val.ismodify = true;
    },
    //确认修改
    async editGoodsFind(val) {
      let res = await goodsEditcate({
        ...val,
        state: val.state ? 1 : 0,
      });
      // console.log(res);
      let { code } = res.data;
      if (code === 0) {
        val.ismodify = false;
        this.getData();
      }
    },
    //删除
    async delGoods(val) {
      // console.log(val);
      let res = await goodsDelcate({
        id: val.id,
      });
      // console.log(res);
      let { code } = res.data;
      if (code == 0) {
        this.getData();
      }
    },
    //弹窗关闭之后内容清空
    dialogClose() {
      this.addFormData = this.$options.data().addFormData;
    },
    //确定添加分类
    async handleAdd() {
      this.addFormData.state=this.addFormData.state ?  1 : 0
      let res=await goodsAddcate({
        cateName:this.addFormData.cateName,
        state:this.addFormData.state
      })
      let {code}=res.data
      if(code===0){
        this.addDialog=false
        this.getData();
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.goods-cate {
  padding: 0 20px;
  margin-top: 15px;
}
.el-button--danger {
  background-color: #d99bac;
  border: 0;
}
.clearfix {
  justify-content: space-between;
  align-items: center;
}
.addCate {
  background-color: #eabeca;
  border: 0;
  color: #fff;
}
.block {
  margin-top: 20px;
}
</style>